<template>
  <view class="fastJishou">
    <view class="main">
      <view class="box" v-for="(item, index) in recycle.list" :key="index">
        <!-- <img :src="item.src" alt=""> -->
        <img :src="item.goods_image" alt="" />
        <view class="text">{{ item.goods_name }}</view>
        <view class="bottom">
          <view class="jia_text">兑换价:</view>
          <view class="price">{{ item.recycle_price }}</view>
          <view class="fuhao">￥</view>
        </view>
      </view>
    </view>
    <view class="message">
      <view class="top">兑换信息</view>
      <view class="center">
        <u-icon name="bag" color="#323232" size="28" class="icon"></u-icon>
        <view class="num_text">商品数量:</view>
        <view class="jian">件</view>
        <view class="num">{{ recycle.total }}</view>
      </view>
      <view class="bottom">
        <u-icon
          name="red-packet"
          color="#323232"
          size="28"
          class="icon"
        ></u-icon>
        <view class="num_text">合计售价:</view>
        <view class="price">{{ recycle.price }}</view>
        <view class="fuhao">￥</view>
      </view>
    </view>
    <view class="bottom_box">
      <view class="left_box">
        <view class="top">
          <text class="text">实收款：</text>
          <text class="fuhao">￥</text>
          <text class="price">{{ recycle.price }}</text>
        </view>
        <view class="fangshi">收款方式：余额</view>
      </view>
      <view class="right_box" @click="onClickHandle('', 'fastJishou', {})"
        >确认兑换</view
      >
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data: () => ({
    car_num: 0,
    sum_price: 2580,
    ids: {},
    recycle: {},
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  mounted() {
    this.ids = this.$Route.query.ids;
    this.affirm_recycleList();
  },
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    ...mapMutations(['CartOnshow']),
    //获取寄售商品列表
    affirm_recycleList() {
      return new Promise((resolve, reject) => {
        this.$http('v1.affirm_recycleList', { ids: this.ids }, '请稍等').then(
          (res) => {
            if (res.code === 1) {
              this.recycle = res.data;
              resolve(res.data);
            } else {
              reject();
            }
          }
        );
      });
    },
    //确认寄售
    yesRecycle() {
      return new Promise((resolve, reject) => {
        this.$http(
          'v1.yesRecycle',
          {
            ids: this.ids,
          },
          '请稍等'
        ).then((res) => {
          if (res.code === 1) {
            this.CartOnshow(true);
            //寄售成功跳转成功页面
            uni.redirectTo({
              url: 'pages/hegui/components/successJishou',
            });
            resolve(res.data);
          } else {
            reject();
          }
        });
      });
    },
    fastJishou() {
      this.yesRecycle();
    },
    onClickHandle(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          case 'fastJishou':
            this.fastJishou();
            break;
        }
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.fastJishou {
  width: 100%;
  height: 100%;
  .main {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    padding-bottom: 359rpx;
    padding-left: 40rpx;
    padding-top: 23rpx;
    .box {
      width: 200rpx;
      height: 290rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      opacity: 1;
      padding: 6rpx;
      margin: 0 12rpx 10rpx;
      img {
        width: 188rpx;
        height: 184rpx;
        display: block;
        margin-bottom: 12rpx;
      }
      .text {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #323232;
        width: 188rpx;
        height: 34rpx;
        line-height: 34rpx;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bottom {
        height: 30rpx;
        margin-top: 12rpx;
        .jia_text {
          float: left;
          font-size: 20rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: rgba(50, 50, 50, 0.6);
          line-height: 30rpx;
          margin-left: 11rpx;
        }
        .fuhao {
          float: right;
          font-size: 20rpx;
          font-family: Bahnschrift-Bold, Bahnschrift;
          font-weight: 400;
          color: rgba(50, 50, 50, 0.6);
          line-height: 30rpx;
        }
        .price {
          float: right;
          font-size: 24rpx;
          font-family: DIN-Bold;
          font-weight: 400;
          color: rgba(50, 50, 50, 1);
          line-height: 30rpx;
          margin-right: 9rpx;
        }
      }
    }
  }
  .message {
    width: 672rpx;
    height: 233rpx;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    backdrop-filter: blur(3px);
    position: fixed;
    left: 40rpx;
    bottom: 126rpx;
    padding: 30rpx;
    box-sizing: border-box;
    .top {
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #111111;
      height: 40rpx;
      line-height: 40rpx;
      margin-bottom: 36rpx;
    }
    .center {
      height: 30rpx;
      margin-bottom: 36rpx;
      .icon {
        float: left;
        margin-left: 41rpx;
      }
      .num_text {
        float: left;
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #323232;
        line-height: 30rpx;
        padding-left: 11rpx;
      }
      .jian {
        float: right;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #323232;
        line-height: 30rpx;
        padding-right: 11rpx;
      }
      .num {
        float: right;
        font-size: 24rpx;
        font-family: Oswald-Bold, Oswald;
        font-weight: 700;
        color: #323232;
      }
    }
    .bottom {
      height: 30rpx;
      .icon {
        float: left;
        margin-left: 41rpx;
      }
      .num_text {
        float: left;
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #323232;
        line-height: 30rpx;
        padding-left: 11rpx;
      }
      .price {
        float: right;
        font-size: 24rpx;
        font-family: DIN-Bold;
        font-weight: 700;
        color: #ef1c38;
        padding-right: 11rpx;
      }
      .fuhao {
        float: right;
        font-size: 24rpx;
        font-family: Oswald-Bold, Oswald;
        font-weight: 400;
        color: #ef1c38;
      }
    }
  }
  .bottom_box {
    position: fixed;
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
    padding-top: 24rpx;
    padding-right: 24rpx;
    padding-left: 40rpx;
    bottom: 0;
    left: 0;
    .left_box {
      float: left;
      .top {
        .text {
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #111111;
        }
        .fuhao {
          font-size: 36rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;
          color: #ef1c38;
          opacity: 0.8;
        }
        .price {
          font-size: 36rpx;
          font-family: DIN-Bold;
          font-weight: 700;
          color: #ef1c38;
        }
      }
      .fangshi {
        font-size: 20rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: rgba(109, 109, 109, 0.6);
      }
    }
    .right_box {
      float: right;
      width: 262rpx;
      height: 76rpx;
      background: #a084f0;
      border-radius: 168rpx 168rpx 168rpx 168rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 76rpx;
      text-align: center;
    }
  }
}
</style>
